import { Button, Col, Form, Input, Modal, Row, Table,Select, message, Calendar, Tooltip, Tag } from 'antd'
import React, { useRef, useState } from 'react'
import { CopyOutlined,CopyrightOutlined ,WhatsAppOutlined,CloseCircleOutlined,FormOutlined} from '@ant-design/icons';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/calendar/locale/zh_CN.js'
import { reg } from '../utils/validate';
import './index.scss'
import { roleList } from '../utils';
import { ajax } from '../api';
moment.locale('zh-cn');
const {Option} = Select 
const { TextArea } = Input;

export default function Teacher(props: any) {


    const {getClassList,classList,teacherList_filter,filterTeacherList,getClassList1,classList1}=props
    const columns:any = [
        {
          title: '序号',
          dataIndex: '_v',
          render:(text:any,item:any,index:any)=>{
            return index+1
          },
          align:'center',
          width:'80px'
          
        },
        {
          title: '课程编号',
          dataIndex: 'word',
          align:'center',
          width:'100px'
          
        },
        {
          title: '课程名称',
          dataIndex: 'className',
          width:'200px',
          ellipsis:true
        },
        {
          title: '课程介绍',
          dataIndex: 'classContent',
          align:"left",
          width:'200px',
          ellipsis:true
        },

        {
          title:"发布人"  ,
          align:'center' ,
          dataIndex:"info",
          render(value:any,item:any,index:any){
            return <span> {value.username} </span>
          }
        },
        {
            title:"权限"  ,
            align:'center' ,
            width:"80px",
            dataIndex:"info",
            render(value:any,item:any,index:any){
              return (
                <Tag color={roleList.find(item=>item.value==value.role)?.color}>
                  {roleList.find(item=>item.value==value.role)?.label}
                </Tag>
              )
            }
          },
        {
            title:"操作"  ,
            align:'center' ,
            width:"80px",
            render(value:any,item:any,index:any){
              return (
               <div>
                 <Tooltip title="点击修改">
                      <Button  onClick={()=>changeRole(item)} size="small" shape="circle" icon={<FormOutlined />} type="primary"></Button>
                  </Tooltip>
               </div>
              )
            }
          },
     
      ];

      //管理修改的id
      const [id,setId]=useState()

    //点击修改老师,传id
        const changeRole=(item:any)=>{
            console.log(item._id);
            setId(item._id)
            setShow(true)
        }

       //切换日期组建的显示
  let [flag,setFlag]=useState<boolean>(false)

  //控制弹窗显示
  const [show,setShow] = useState<boolean>(false)
  const [form] = Form.useForm()
  const inp:any=useRef()
  const [value1,setValue1]=useState<any>("")
  const [disabled,setDisabled]=useState<boolean>(true)
  const handleOk=()=>{
     //获取表单的值
  if(!disabled){
    form.validateFields().then(value=>{
      //加入节课日期
      //还有添加人信息,id
      value.id=id
      value.endTime=value1
      ajax.changeclass(value).then(res=>{
          if(res.code=200){
            setShow(false)
            form.setFieldsValue({classTeacher:'',peopleNum:'',checkWay:''})
            setFlag(false)
            getClassList1()
          }
      })
    
   
      console.log(value)
    }).catch(err=>{
      message.error("请输入正确的表单信息")
    })
  }else{
    message.error("请选择日期")
  }
   
  }
  const handleCancel=()=>{
      setShow(false)
    
  }

    //选择日期回调
    const onSelect=(value: any)=>{
        setDisabled(false)
          console.log(value.format('YYYY-MM-DD'));
          setValue1(value.format('YYYY-MM-DD'))
      }
 
  return (
    <div>
       
        <Table dataSource={classList1} rowKey={record => record._id} columns={columns} pagination={{pageSize:4}} />
                {/* 弹出修改框 */}
        <Modal  
            title="修改课程信息" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定修改"
            cancelText="取消"
            okType="danger"
        >
          
          <Form
          name="basic"
          form={form}
          layout={"vertical"}
          >
        <Form.Item
        name="classTeacher"
        label="请选择老师"
        rules={[{ required: true, message: '请选择老师' }]}
    >
        <Select  style={{ width: '100%' }} >
                {
                    teacherList_filter&&teacherList_filter.map((item: any,index: any)=>(
                    <Option
                    key={index} 
                    value={item.username}
                    >
                        {item.username} 
                    </Option>
                    ))
                }
        </Select>
        </Form.Item>
        <Form.Item
            name="peopleNum"
            label="课程人数"
            rules={[{ required: true, message: '请输入课程人数' }]}
          >
            <Input 
          prefix={<CopyrightOutlined />}
          placeholder="请输入课程人数"
          allowClear
          />
          </Form.Item>
            <Form.Item
            name="checkWay"
            label="课程考试方式"
            rules={[{ required: true, message: '请输入课程考试方式' }]}
          >
            <Input 
          prefix={<CopyOutlined />}
          placeholder="请输入课程考试方式"
          allowClear
          />
          </Form.Item>
            <Row>
            <Col span={11}>
            <Input 
            prefix={<WhatsAppOutlined className="site-form-item-icon" />}
            placeholder="请选择日期"
            disabled={disabled}
            ref={inp}
            value={value1}
            />
            </Col>      
            <Col span={11} offset={2}>
            <Button type="primary" onClick={()=>setFlag(!flag)}>选择结课日期</Button>
                {
                flag&&<div className="site-calendar-demo-card">
                <Calendar locale={locale}  fullscreen={false} onSelect={onSelect}  />
                </div>
                }
            </Col>
        </Row>
        </Form>
          
        </Modal>
    </div>
  )
}
